import React, { KeyboardEvent, FormEvent } from 'react'
import { IAddProp, IAddState } from '../interfaces'
import './styles/TodoAdd.css'

class TodoAdd extends React.Component<IAddProp, IAddState> {
  state = {
    todoVal: ''
  }

  handleEnterChange = (evt: FormEvent<HTMLInputElement>) => {
    this.setState({ todoVal: evt.currentTarget.value })
  }

  handleEnterInput = (evt: KeyboardEvent<HTMLInputElement>) => {
    const { addNewTodo } = this.props
    const { todoVal } = this.state

    // 判断非空
    if (todoVal === '') {
      return
    }
    if (evt.keyCode === 13) {
      // 添加数据
      addNewTodo(todoVal)
      // 清理输入框
      this.setState({
        todoVal: ''
      })
    }
  }

  render() {
    const { todoVal } = this.state

    return (
      <div>
        <input
          type="text"
          className="add"
          value={todoVal}
          placeholder="Enter to add new todo"
          onChange={this.handleEnterChange}
          onKeyUp={this.handleEnterInput}
        />
      </div>
    )
  }
}

export default TodoAdd
